<template>
  <div style="background:#ffffff;">
    <div>
      <el-row class="top_row">
        <el-col :span="24">
          <div class="top_title">
            <div class="left_add">
              <el-button
                type="info"
                @click="$router.push('/User/Edit')"
                size="mini"
                icon="el-icon-circle-plus"
              >新增</el-button>
              <el-button
                type="danger"
                @click="$router.push('/User/Month')"
                size="mini"
                icon="el-icon-circle-plus"
                v-show="false"
              >生日</el-button>
              <el-button
                type="primary"
                @click="dialogFormVisible = true"
                size="mini"
                icon="el-icon-search"
                plain
              >高级搜索</el-button>
            </div>
            <div class="right_sel">
              <el-input size="mini" v-model="SelName" placeholder="查找...">
                <el-button slot="append" @click="SelDt" icon="el-icon-search" style="width:50px;"></el-button>
              </el-input>
            </div>
          </div>
        </el-col>
      </el-row>
      <!--高级搜索对话框-->
      <el-dialog title :visible.sync="dialogFormVisible" open>
        <el-form
          :model="Seachbox"
          label-position="top"
          :inline="true"
          label-width="100px"
          size="small"
          ref="seach"
        >
          <el-form-item label="部门">
            <el-select v-model="Seachbox.DepartmentName" style="width:370px">
              <el-option
                v-for="(item,index) in TypeList.UserDepartment"
                :key="index"
                :value="item.DepartmentName"
                :label="item.DepartmentName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="角色">
            <el-select v-model="Seachbox.RoleName_CHS" style="width:370px">
              <el-option
                v-for="(item,index) in TypeList.RoleName"
                :key="index"
                :value="item.RoleName_CHS"
                :label="item.RoleName_CHS"
                
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="真实姓名" >
            <el-input placeholder v-model="Seachbox.FullName"  style="width:370px" size="small"></el-input>
          </el-form-item>
          
          <el-form-item label="用户名">
            <el-input placeholder v-model="Seachbox.UserName" style="width:370px" size="small"></el-input>
          </el-form-item>
          
          <el-form-item label="联系电话">
            <el-input placeholder v-model="Seachbox.Phone1" style="width:370px" size="small"></el-input>
          </el-form-item>
          
          <el-form-item label="身份证号">
            <el-input placeholder v-model="Seachbox.IDNumber" style="width:370px" size="small"></el-input>
          </el-form-item>
          
          <el-form-item>
            <el-button @click="SeachUser('seach')" type="primary" size="small" icon="el-icon-search">搜索</el-button>
            <el-button @click="dialogFormVisible = false" size="small" icon="el-icon-close">返回</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

    <el-table :data="UserList" style="width: 100%" >
      <el-table-column fixed prop="item.pk_User" label="ID" width="80"></el-table-column>
      <el-table-column prop="ImgDt" width="90">
        <template slot-scope="scope">
          <!-- 'data:image/jpeg;base64,' -->
           <el-avatar :size="50" :src="'data:image/jpeg;base64,'+scope.row.ImgDt"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="item.DepartmentName" label="部门" width="130"></el-table-column>
      <el-table-column prop="item.FullName" label="真实姓名" width="150"></el-table-column>
      <el-table-column prop="item.UserName" label="用户名" width="150"></el-table-column>
      <el-table-column prop="item.RoleName_CHS" label="角色" width="150"></el-table-column>
      <el-table-column prop="item.Phone1" label="电话" width="150"></el-table-column>
      <el-table-column prop="item.Wages" label="工资" width="150"></el-table-column>
      <el-table-column prop="item.IsLock" label="禁用" width="80">
        <template slot-scope="scope">
          <el-checkbox :value="scope.row.IsLock" :disabled="true"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" min-width="200">
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row.item.pk_User)"
            type="primary"
            class="el-icon-edit-outline"
            size="mini"
          >修改</el-button>
          <el-popconfirm @onConfirm="Delete(scope.$index,scope.row.item.pk_User)" style="margin-left:10px;"
                  :title="'确定删除此?'">
                  <el-button slot="reference" type="danger" size="mini" icon="el-icon-delete">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.top_row {
  border-bottom: 1px solid #f7f7f7;
  padding-bottom: 10px;
  .top_title {
    .left_add {
      float: left;
    }
    .right_sel {
      float: right;
    }
  }
}
</style>

<script>
export default {
  data() {
    return {
      UserList: [],
      SelName: "",
      dialogFormVisible: false,
      Seachbox: {
        DName: "",
        RName: "",
        FName: "",
        UName: "",
        Phone: "",
        NumberID: "",
      },
      TypeList: {},
    }
  },
  mounted() {
    this.$axios({
      url: "/HrApi/UserList/GetUserList",
      method: "GET",
      params: {
        DName: this.SelName,
        RName: this.SelName,
        FName: this.SelName,
        UName: this.SelName,
        Phone: "",
        NumberID: "",
      },
    }).then((res) => {
      if (!res.data.code) {
        console.log(res.data);
        this.UserList = res.data.data;
      } else {
        this.$message.error(res.data.msg);
      }
    });

    //获取类型
    this.$axios({
      url: "/HrApi/UserList/GetTypeList",
      method: "GET",
    }).then((res) => {
      console.log(res.data.data);
      this.TypeList = res.data.data
    });
  },
  methods: {
    SelDt() {
      this.$axios({
        url: "/HrApi/UserList/GetUserList",
        method: "GET",
        params: {
          pk_User: 1,
          SelName: this.SelName,
        },
      }).then((res) => {
        if (!res.data.code) {
          this.UserList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
     handleClick(id) {
      this.$router.push({
        path: "/User/Edit",
        query: {
          id: id,
        }
      });
    },
    SeachUser(seach) {
          this.$axios({
          url: "/HrApi/UserList/GetUserList",
          method: "GET",
          params:{
            DName: this.Seachbox.DepartmentName==null?"":this.Seachbox.DepartmentName,
            RName: this.Seachbox.RoleName_CHS==null?"":this.Seachbox.RoleName_CHS,
            FName:this.Seachbox.FullName==null?"":this.Seachbox.FullName,
            UName:this.Seachbox.UserName==null?"":this.Seachbox.UserName,
            Phone:this.Seachbox.Phone1==null?"":this.Seachbox.Phone1,
            NumberID:this.Seachbox.IDNumber==null?"":this.Seachbox.IDNumber
          }
        }).then((res) => {
          if (!res.data.code) {
            this.$refs[seach].resetFields();
             this.dialogFormVisible = false
            console.log(res.data)
            this.UserList = res.data.data;
          } else {
            this.$message.error(res.data.msg);
          }
        })
    },
    Delete(index,pk_User){
      this.$axios({
        url: '/HrApi/UserList/DeleteUserList',
        method: 'POST',
        params: {
          pk_User:pk_User
        }
      }).then(res => {
        if (!res.data.code) {
          this.$message.success(res.data.msg)
          this.SelDt();
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }
  }
};
</script>
